import React, { useState } from "react";
import { Button, Modal } from "antd";
import './bid.scss'
import { useQuery } from "@tanstack/react-query"
import { makeRequest } from "../../axios"

const Bids = (props) => {
  const [visiable, setVisiable] = useState(false);

  const Bids_url = '/bid/'+ String(props.bwicId)
//   console.log(Bids_url)

  const { isLoading, error, data } = useQuery(
    {
      queryKey: ["bids"],
      queryFn: () => makeRequest.get(Bids_url).then((res) => {return res.data.data})
    }
  )

  const onOk = () => {
    // console.log("编写自己的onOk逻辑");
    closeModal();
  };

  const closeModal = () => {
    setVisiable(false);
  };

//   const data = [
//     {
//         "bid_id": "4625",
//         "bwic_id": "1014",
//         "client_id": "Client09",
//         "market_value": null,
//         "bid_successful": "N",
//         "time": "20220217"
//     },
//     {
//         "bid_id": "4626",
//         "bwic_id": "1014",
//         "client_id": "Client20",
//         "market_value": null,
//         "bid_successful": "N",
//         "time": "20220218"
//     },
//     {
//         "bid_id": "4627",
//         "bwic_id": "1014",
//         "client_id": "Client16",
//         "market_value": null,
//         "bid_successful": "N",
//         "time": "20220218"
//     },
//   ]

  return (
    <>
      <span onClick={() => setVisiable(true)}>{props.buttonText}</span>
      <Modal
        title="详情"
        open={visiable}
        onOk={onOk}
        onCancel={closeModal}
        afterClose={closeModal}
      >
        {
            error?
            <p className='prompt'>加载失败</p>
            :
            isLoading?
                <p className='prompt'>加载中</p>
                :
                data.map((bid) => (
                    <div className="bidContainer">
                        <div className="bidItem">
                            <span className="itemTitle">{'#' + bid.bid_id}</span>                   
                        </div>
                        <div className="bidItem">
                            <span className="itemTitle">{bid.client_id}</span>                      
                        </div>
                        <div className="bidItem">
                            <span className="itemTitle">Time: </span>
                            <span className="time">{bid.time}</span>                         
                        </div>
                        <div className="bidItem">
                            <span className={bid.bid_successful}>{bid.bid_successful=='Y'? 'Successful' : 'Not Successful'}</span>                    
                        </div>
                    </div>

                ))            
        }

        
      </Modal>
    </>
  );
};

export default Bids;